<template>
	<view class="main">
		<uv-form labelPosition="left" :model="model" labelWidth='80' :rules="rules" ref="form">
			<uv-form-item label="地址" required prop="address" borderBottom>
				<uv-input v-model="model.address" border="none" placeholder="请输入地址">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="姓名" required prop="name" borderBottom>
				<uv-input v-model="model.name" border="none" placeholder="请输入姓名">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="手机号" required prop="phone" borderBottom>
				<uv-input v-model="model.phone" border="none" placeholder="请输入手机号">
				</uv-input>
			</uv-form-item>
			<uv-button type="primary" text="保存" customStyle="margin-top: 50px;background:#2c9b94;borderColor:#2c9b94;"
				@click="submit"></uv-button>
		</uv-form>
	</view>
</template>

<script>
	import {
		mobile
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';

	export default {
		data() {
			return {
				model: {
					name: '',
					address: '',
					phone: '',
				},
				rules: {
					'name': {
						required: true,
						type: 'string',
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'address': {
						required: true,
						type: 'string',
						message: '请输入地址',
						trigger: ['blur', 'change']
					},
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$uv.test.mobile(value);
							},
							message: '手机号格式错误',
							trigger: ['blur']
						},
					],
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onLoad(o) {
			if(JSON.parse(o.info).id){
				this.model = JSON.parse(o.info)
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		padding: 0 40rpx;
	}
</style>